<template>
	<view>
		<picker mode="multiSelector" @change="doChange" @columnchange="doColumnChange" :value="self_value" :range="self_range">
			<input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder" :value="value_text" />
		</picker>
	</view>
</template>

<script>
	const now = new Date().getTime()
	let self_days = null
	let self_days_text = ''
	let self_hours = null
	let self_seconds = null
	
	export default{
		props:{
			timestamp: {
				type: Number,
				default: 0
			},
			emptyText: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			}
		},
		data(){
			return {
				self_range:[],
				self_value:[0,0,0],
				value_text:null
			}
		},
		watch:{
			timestamp:{
				handler(newValue,oldValue){
					this.timestampChange(newValue)
				},
				//immediate: true
			}
		},
		beforeMount() {
			
			const days = ['']
			const days_text = [this.emptyText]
			for (let i = 0; i < 20; i++) {
				days.push(this.TIME_FORMAT(now + 86400000 * i, 'YYYY-MM-dd'));
				let text = this.TIME_FORMAT(now + 86400000 * i, 'M月d日');
				if (i == 0) {
					text += ' （今天）';
				}
				if (i == 1) {
					text += ' （明天）';
				}
				if (i == 2) {
					text += ' （后天）';
				}
				days_text.push(text);
				const hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14',
					'15', '16', '17', '18', '19', '20', '21', '22', '23'
				];
				const seconds = [
					'00',
					'01',
					'02',
					'03',
					'04',
					'05',
					'06',
					'07',
					'08',
					'09',
					'10',
					'11',
					'12',
					'13',
					'14',
					'15',
					'16',
					'17',
					'18',
					'19',
					'20',
					'21',
					'22',
					'23',
					'24',
					'25',
					'26',
					'27',
					'28',
					'29',
					'30',
					'31',
					'32',
					'33',
					'34',
					'35',
					'36',
					'37',
					'38',
					'39',
					'40',
					'41',
					'42',
					'43',
					'44',
					'45',
					'46',
					'47',
					'48',
					'49',
					'50',
					'51',
					'52',
					'53',
					'54',
					'55',
					'56',
					'57',
					'58',
					'59'
				];
				const range = [];
				range[0] = days_text;
				range[1] = hours;
				range[2] = seconds;
				this.self_range = range
				self_days = days
				self_days_text = days_text
				self_hours = hours
				self_seconds = seconds
			}
		},
		methods:{
			 doChange() {
				this.value_text = this.getValueText()
				var day = self_days[this.self_value[0]];
				var hour = self_hours[this.self_value[1]];
				var second = self_seconds[this.self_value[2]];
				var datetime = '';
				//console.log('this.self_value',this.self_value)
				if (day) {
					datetime = day + ' ' + hour + ':' + second;
					
				}
				var timestamp = 0;
				if (datetime) {
					timestamp = new Date(datetime.replace(/-/g, '/')).getTime();
				}
			
				this.$emit('dtPickerChanged', {
					detail: {
						value: timestamp
					}
				})
			},
			doColumnChange(e){
				var value = this.self_value;
				value[e.detail.column] = e.detail.value;
				this.self_value = value
			},
			TIME_FORMAT(t, fmt){
				const newDate = new Date();
				newDate.setTime(t);
				return newDate.VP_FORMAT(fmt);
			},
			timestampChange(timestamp){
				// 未初始化时不执行
				if (!self_days) {
					return;
				}
				if (timestamp > 0) {
					var days = self_days;
					var days_text = self_days_text;
					var hours = self_hours;
					var seconds = self_seconds;
				}
				if (timestamp < now) {
					timestamp = now;
				}
				var date = this.TIME_FORMAT(timestamp, 'YYYY-MM-dd');
				var hour = this.TIME_FORMAT(timestamp, 'hh');
				var minutes = this.TIME_FORMAT(timestamp, 'mm');
				var value = this.self_value
				for (var i = 0; i < days.length; i++) {
					if (date == days[i]) {
						value[0] = i;
						break;
					}
				}
				for (var i = 0; i < hours.length; i++) {
					if (hour == hours[i]) {
						value[1] = i;
						break;
					}
				}
				// console.log('VP---D>'+value[1]);
				for (var i = 0; i < seconds.length; i++) {
					if (minutes == seconds[i]) {
						value[2] = i;
						break;
					}
				}
				this.self_value = value
				this.value_text = this.getValueText()
			},
			getValueText(){
				var day = self_days_text[this.self_value[0]];
				var hour = self_hours[this.self_value[1]];
				var second = self_seconds[this.self_value[2]];
				if (self_days[this.self_value[0]] == '') {
					return day;
				} else {
					return day + ' ' + hour + ':' + second;
				}
			}
		}
	}
</script>

<style>
	@import './dtPicker.css';
</style>